<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title></title>

		<!-- 需要 -->
		<script language="javascript" type="text/javascript"
			src="js/jquery-1.5.js">
</script>
		<script language="javascript" type="text/javascript"
			src="js/excanvas.min.js">
</script>
		<script language="javascript" type="text/javascript"
			src="js/jquery.flot.js">
			
</script>
	<script type="text/javascript" src="js/ajax-pushlet-client.js"></script>
		<!--                     下面是柱状图所要用到的两个文件         -->

		<script language="javascript" type="text/javascript"
			src="js/Bar-chart.js">
</script>

		<!-- 下面是饼图所要用到的两个文件 -->
		<script type="text/javascript" src="js/jquery.flot.pie.min.js">
</script>
		<script type="text/javascript" src="js/Pie-chart.js">
</script>


		<script type="text/javascript">
//请在 $(function(){  })外申明
var  barchart1=new BarChart();//第一个柱状图对象
var  barchart2=new BarChart();//第二个柱状图对象	
var pie2=new PieChart();//第一个饼图对象
var pie1=new PieChart();//第二个饼图对象	
$(function() {
	/***********具体各个参数是什么看Bar-chart.js的注释*************/
	/***************************没有使用ajax的柱状图********************************/
	
	map= {
		'计算机学院' : 0.821,
		'人文学院' : 0.4,
		//'机电学院' : 0.6,
		//'外国语学院' : 0.4,
		'广州学院' : 0.4
	};
	
	
	barchart1.buildBarsChart($("#placeholderForBars"), $("#lengendForBars"),map)
	

	/***************************使用定时更新的柱状图********************************/
	
	PL._init();//初始化pushlet一个页面只需初始化一次
	PL.joinListen("pushlet/collegeBars")//监听这个主题
	//PL.publish(theQueryArgs,aSubject)
	
	
	barchart2.buildBarsChart($("#placeholderForBars2"), $("#lengendForBars2"),{"计算机学院":0.25,"人文学院":0.21,"外国语学院":0.66,"广州学院":0.627,"机电学院":0.640})
	//接着 当服务端有返回值时，会自动调用下面的 onData方法

	/***********************没有定时更新的饼图***********************************************/

	
	pie1.buildPieChart($("#placeholderForPie"), {'已缴费' : 0.3,'未缴费' : 0.7}, null);

	/***********************使用定时更新的饼图***********************************************/

	
	pie2.buildPieChart($("#placeholderForPie2"), {'已缴费' : 0.3,	'未缴费' : 0.7},	null);

})
function onData(event){//当服务端有返回值时会自动调用些方法
		
		var barData=decodeURIComponent(event.get("barData"))
		//alert(str)
		barchart2.update(barData);//执行刷新柱状图
		var pieData=decodeURIComponent(event.get("pieData"))
		//alert(str)
		pie2.update(pieData) //执行刷新柱状图pieData
	//	alert(event.get("data"))	
}
index=5;
function send()
{
	index++;
	$.post("json/chartTestAction!acceptArgs",{date:new Date,'data':index},function(){
		alert("发送成功"+index)
	})
}
</script>
	</head>

	<body >
	<input type="button" value="send" onclick="send()"/>
		<!--***************************没有使用ajax的柱状图******************************** -->
		<div>
			<div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<font color="#FF0000" size="5px">报到率（%）</font>
			</div>
			<div id="placeholderForBars"
				style="width: 600px; height: 300px; float: left"></div>
			<div id="lengendForBars" style="float: left; width: 100px"></div>
		</div>
<!--		/***************************使用ajax的柱状图********************************/  -->
<!---->
		<div>
			<div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<font color="#FF0000" size="5px">报到率（%）</font>
			</div>
			<div id="placeholderForBars2"
				style="width: 600px; height: 300px; float: left"></div>
			<div id="lengendForBars2" style="float: left; width: 100px"></div>
		</div>

<!--		***************************没有使用ajax的饼图********************************/  -->
		<div>
			<div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<font color="#FF0000" size="5px">缴费情况（%）</font>
			</div>
			<div id="placeholderForPie"
				style="width: 600px; height: 300px; float: left"></div>

		</div>
<!--		***************************使用ajax的饼图********************************/  -->
<!--		<div>-->
			<div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<font color="#FF0000" size="5px">缴费情况（%）</font>
			</div>
			<div id="placeholderForPie2"
				style="width: 600px; height: 300px; float: left">
				
			</div>
		</div>
		<div>
			<div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<font color="#FF0000" size="5px">缴费情况（%）</font>
			</div>
			<div id="placeholderForPie2"
				style="width: 600px; height: 300px; float: left">
				
			</div>
		</div>


	</body>
</html>